<template>
  <div>
    <el-header>
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
      >
        <el-menu-item :index="item.id" v-for="(item,i) in menuList" :key="i">{{item.label}}</el-menu-item>
      </el-menu>
      <p class="funP" v-if="userInfo == null">
        <a @click="toLogin">登陆</a>
      </p>
       <p class="funP" v-else>
        <a @click="tg">投稿</a>
        <el-divider class="divider" direction="vertical"></el-divider>
        <a @click="tg">{{userInfo.nickname}}</a>
        <el-divider class="divider" direction="vertical"></el-divider>
        <a @click="toLogin">退出</a>
      </p>
    </el-header>
  </div>
</template>
<script>
export default {
  data() {
    return {
      menuList: [
        {
          label: "html",
          id: "1"
        },
        {
          label: "css",
          id: "2"
        },
        {
          label: "javascaript",
          id: "3"
        },
        {
          label: "vue",
          id: "4"
        },
        {
          label: "插件",
          id: "5"
        }
      ],
      activeIndex: "1",
      userInfo:JSON.parse(localStorage.getItem('userInfo'))
    };
  },
  methods:{
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    toLogin() {
      this.$router.push({
        name: "login"
      });
    },
    tg(){
      this.$router.push({
        name:'contribution'
      })
    }
  },
  mounted(){
    
  }
};
</script>
<style scoped>
.el-header{
    height: 102px !important;
    padding: 0;
    box-shadow: -1px 2px 5px #888888;
    margin: 0 0 15px 0;
}
.funP{
    padding: 0 10px;
}
</style>